<template>
  <div class="image-container">
    <img src="@/assets/welcome2.gif" alt="Welcome Image" loop/>
    <p class="copyright">caishuyan.caishuyan</p>
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>

<style scoped>
.image-container {
  width: 100%;
  height: 100vh; /* 使容器的高度等于视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 添加相对定位 */
}

.image-container img {
  width: 90%;
  height: 90%;
  object-fit: cover; /* 保持图片比例，同时覆盖整个容器 */
}

.image-container .copyright {
  position: absolute; /* 添加绝对定位 */
  bottom: 10px; /* 调整底部间距 */
  color: #b3e9fe; /* 文字颜色 */
}
</style>
